@import url(public.less);
@import url(rem.less);
.header{
    background-color: white;
    .h(100);
    text-align: center;
    border-bottom: 1px solid #ccc;
    p{
        .font-dpr(14px);
        .lh(100);
    }
}
.main{
    .pb(117);
    .left{
        width: 30%;
        border-right: 1px solid #ccc;
        box-sizing: border-box;
        background-color: #ececec;
        .font-dpr(14px);
        float: left;
        .ul{
            .li,.lis{
                .lh(90);
                border-bottom: 1px solid #ccc;
                background: url(../images/zan.png)no-repeat;
                background-size: 28px;
                background-position-x: 10%;
                background-position-y: 25px;
                i{
                    height: 100%;
                    display: inline-block;
                    .pl(80);
                }
            }
            .active{
                background-color: white;
                color: #703c98;
            }
            .lis{
                span{
                    float: right;
                    width: 10%;                
                }
                ol{
                    display: none;
                    text-align: center;
                    li{
                        .h(90);
                        .lh(90); 
                    }
                }
            }
        }
    }
    .right{
        width: 70%;
        background-color: white;
        float: left;
        .k{
            display: flex;
            justify-content: space-around;
            align-items: center;
            .h(200);
            span{
                display: inline-block;
                width: 30%;
                height: 3px;
                background-color: #ccc;
            }
            .r{
                float: right;
            }
            .fang{
                text-align: center;
                .w(100);
                .h(40);
                .lh(40);
                background-color: #ccc;
                color: white;
                .font-dpr(12px);
            }
        }
        .title{
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            align-items: center;
            text-align: center;
            figure{
                width: 33%;
                img{
                    width: 50%;
                }
                figcaption{
                    .lh(50);
                }
            }
        }
    }
}